<template>
	<view class="standar">
		<view class="standarImage">
			<image src="../../static/images/home_10.png" mode=""></image>
		</view>
		<view class="standarIns">
			<view class="minLinePic">
				<view class="title">结案条件:</view>
				<view class="express">
					<view class="info">
						<view :class="{hide:!iSinfo}">{{content}}</view>
						<view class="tips" @click="showinfo" v-if="!iSinfo">
							<!-- label="展开" -->
							<u-icon name="arrow-down" size="24" color="#0078FF"  labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
						</view>
					</view>
					<view class="tips hidebtn" @click="showinfo" v-if="iSinfo">
						<u-icon name="arrow-up" size="24" color="#0078FF" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="minLinePic">
				<view class="title">案件说明:</view>
				<view class="express">
					<view class="info">
						<view :class="{hide:!iSinfo1}">{{content}}</view>
						<view class="tips" @click="showinfo1" v-if="!iSinfo1">
							<!-- label="展开" -->
							<u-icon name="arrow-down" size="24" color="#0078FF"  labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
						</view>
					</view>
					<view class="tips hidebtn" @click="showinfo1" v-if="iSinfo1">
						<u-icon name="arrow-up" size="24" color="#0078FF" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="minLinePic">
				<view class="title">法律法规:</view>
				<view class="express">
					<view class="info">
						<view :class="{hide:!iSinfo2}">{{content}}</view>
						<view class="tips" @click="showinfo2" v-if="!iSinfo2">
							<!-- label="展开" -->
							<u-icon name="arrow-down" size="24" color="#0078FF"  labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
						</view>
					</view>
					<view class="tips hidebtn" @click="showinfo2" v-if="iSinfo2">
						<u-icon name="arrow-up" size="24" color="#0078FF" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				iSinfo: false,
				iSinfo1: false,
				iSinfo2: false,
				content:`结案条件结案条件结案条件结案条件结案条件结案条件
				结案条件结案条件结案条件结案条件结案条件结案条件结案条件条件结案条件结案条件结案条
				结案条件结案条件结案条件结案条件结案条件结案条件结案条件条件结案条件结案条件结案条件`
			}
		},
		methods:{
			// 全文展开收起
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showinfo1() {
				this.iSinfo1 = !this.iSinfo1
			},
			showinfo2() {
				this.iSinfo2 = !this.iSinfo2
			}
		}
	}
</script>

<style scoped lang="scss">
	.standar{
		.standarImage{
			width: 100%;
			height: 400rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.standarIns{
			padding: 30rpx;
			.minLinePic{
				margin: 30rpx 0rpx;
				.title{
					font-size: 36rpx;
				}
				// 展开收起
				.express {
					display: flex;
					background-color: #FFFFFF;
					box-shadow: 0px 0px 10px #DFE2ED;
					padding: 30rpx;
					border-radius: 10rpx;
					margin-top: 20rpx;
					flex-direction: column;
					position: relative;
					.info {
						display: flex;
						flex-direction: column;
						.tips {
							width: 50rpx;
							height: 40rpx;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
							position: absolute;
							bottom: 30rpx;
							right: 20rpx;
						}
					}
				
				    }
				    // 收起 按钮
				    .hidebtn {
				        display: flex;
				        flex: 1;
				        justify-content: flex-end;
				        color: #0078FF;
				        font-size: 28rpx;
				    }
				    // 展开 文字
				    .hide {
				        word-break: break-word; //换行模式
				        overflow: hidden;
				        text-overflow: ellipsis; //修剪文字，超过2行显示省略号
				        display: -webkit-box;
				        -webkit-line-clamp: 3; //此处为上限行数
				        -webkit-box-orient: vertical;
				    }
			}
			
		}
	}
</style>
